<template>
  <div>
    <!-- 基础信息 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基础信息</span>
      </div>
      <div class="form-container">
        <el-form ref="form" :model="form" :rules="rules" label-width="130px" class="demo-ruleForm" size="small">
          <el-form-item label="热门银行名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入热门银行名称"/>
          </el-form-item>
          <el-form-item label="图片" prop="logo_url">
            <el-upload
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :accept="'image/png,image/gif,image/jpg,image/jpeg'"
              :action="userHeadUploadApi"
              class="avatar-uploader">
              <img v-if="form.logo_url" :src="form.logo_url" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
            <span class="pic_text">上传一张图片，图片大小不能超过3MB</span>
          </el-form-item>
          <el-form-item label="小标签" prop="supplier_id">
            <div class="tags">
              <div v-for="(item,index) in form.label" :key="index" class="blocks">
                <el-input
                  v-model="item.tagname"
                  class="input-new-tag"
                  size="small"
                  placeholder="输入标签"
                />
                <span v-if="form.label.length > 1" class="el-icon-remove" @click="form.label.splice(index,1)" />
              </div>
              <span v-if="form.label.length < 3" class="el-icon-circle-plus" @click="form.label.push({tagname: ''})" />
            </div>
            <span class="pic_text">最少添加一个,最多三个</span>
          </el-form-item>
          <el-form-item label="背景颜色">
            <div class="block">
              <el-color-picker v-model="form.background_color" />
            </div>
            <span class="pic_text">热门银行列表头部背景颜色</span>
          </el-form-item>
          <el-form-item label="副标题" prop="title">
            <el-input v-model="form.title" placeholder="请输入副标题"/>
          </el-form-item>
          <el-form-item label="结算规则" prop="settlement_rules">
            <el-input v-model="form.settlement_rules" placeholder="请输入结算规则"/>
          </el-form-item>
          <el-form-item label="推广教程" prop="course_url">
            <el-upload
              :show-file-list="false"
              :on-success="handleAvatarSuccess1"
              :accept="'image/png,image/gif,image/jpg,image/jpeg'"
              :before-upload="beforeAvatarUpload"
              :action="userHeadUploadApi"
              class="avatar-uploader">
              <img v-if="form.course_url" :src="form.course_url" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
            <span class="pic_text">上传一张图片，图片大小不能超过3MB</span>
          </el-form-item>
          <el-form-item label="热门活动" prop="activity_details">
            <!-- 富文本编辑器 -->
            <editor ref="editor" :form="form.activity_details" @saveContent="saveContent"/>
          </el-form-item>
        </el-form>
        <div class="fixed-bottom">
          <el-button size="small" @click="cancel">取消</el-button>
          <el-button size="small" type="primary" @click="submitForm">提交</el-button>
        </div>
      </div>
    </el-card>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import editor from './editor'
import { insertBank, updateBank, getBankInfo } from '@/api/mall/hotBank'

export default {
  components: { editor },
  data() {
    return {
      form: {
        name: '', // 银行名称
        logo_url: '', // 背景图片
        label: [{ tagname: '' }], // 标签
        background_color: '#1e90ff', // 背景颜色
        title: '', // 副标题
        settlement_rules: '', // 结算规则
        course_url: '', // 推广教程
        activity_details: '' // 富文本
      },
      rules: {
        name: [
          { required: true, message: '请输入宝贝名', trigger: 'blur' }
        ],
        logo_url: [
          { required: true, message: '请输入背景图片', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入副标题', trigger: 'blur' }
        ],
        settlement_rules: [
          { required: true, message: '请输入结算规则', trigger: 'blur' }
        ],
        course_url: [
          { required: true, message: '请上传推广教程', trigger: 'blur' }
        ],
        activity_details: [
          { required: true, message: '请填写活动', trigger: 'blur' }
        ]
      },
      addtag_show: true,
      deltag_show: false,
      type: '', // 填写类型 1新增 2修改
      content: ''
    }
  },
  computed: {
    ...mapGetters([
      'userHeadUploadApi'
    ])
  },
  created() {
    // 通过id获取详情回显
    this.type = this.$route.query.type
    if (this.type === 2) {
      // 详情
      getBankInfo(this.$route.query.bank_id).then(res => {
        const bank = res
        const label = (bank.label).split(',')
        bank.label = label.map(item => {
          return { tagname: item }
        })
        this.form = bank
        this.content = bank.activity_details
      })
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.form.logo_url = file.response
    },
    handleAvatarSuccess1(res, file) {
      this.form.course_url = file.response
    },
    beforeAvatarUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 2.86
      if (!isLt3M) {
        this.$message.error('上传图片大小不能超过 3MB!')
      }
      return isLt3M
    },
    saveContent(r) {
      // 富文本内容
      this.form.activity_details = r
    },
    // 提交
    submitForm() {
      // 获取组件富文本内容，
      this.$refs.editor.saveContent()
      // 表单校验
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const list = JSON.parse(JSON.stringify(this.form))
          const label = list.label.map(item => {
            return item.tagname
          })
          list.label = label.join(',')
          if (this.type === 1) {
            this.insertBank(list)
          } else {
            this.updateBank(list)
          }
        }
      })
    },
    insertBank(data) {
      insertBank(data).then(res => {
        this.$notify({
          title: '新增成功',
          type: 'success',
          duration: 2500
        })
        this.cancel()
      }).catch(res => {

      })
    },
    updateBank(data) {
      updateBank(data).then(res => {
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.cancel()
      }).catch(res => {

      })
    },
    cancel() {
      this.$router.push({ path: '/chaomall/hotbank' })
    }
  }
}
</script>

<style scoped>
  .form-container {
    width: 90%;
    padding-bottom: 50px;
  }

  .box-card {
    margin-bottom: 10px;
  }

  .el-card__body {
    padding: 20px 20px 0 20px !important;
  }

  .form-container-parameter {
    background: #f3f3f3;
    padding: 20px 20px 0 0;
  }

  .bottom_btn {
    position: absolute;
    bottom: 0;
    z-index: 10099;
    background: hsla(0, 0%, 100%, .95);
    padding: 10px;
    border-top: none;
    width: calc(100% - 20px);
    box-shadow: 0 -3px 5px #eee;
    text-align: center;
    background: #fff;
    left: 50%;
    transform: translateX(-50%);
  }

  .avatar-uploader >>> .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 120px;
    background-color: #fafafa;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }

  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
  }

  .tags {
    display: flex;
    align-items: center;
  }

  .blocks {
    display: flex;
  }

  .el-icon-circle-plus {
    font-size: 26px;
    color: #00a0e9;
    cursor: pointer;
    display: inline-block;
    margin-left: 15px;
  }

  .el-icon-remove {
    font-size: 13px;
    margin-right: 15px;
    color: #ff0000;
  }

  .pic_text {
    color: #888888;
    font-size: 14px;
  }

  .fixed-bottom {
    position: absolute;
    bottom: 0;
    z-index: 10099;
    background: hsla(0, 0%, 100%, .95);
    padding: 10px;
    border-top: none;
    width: calc(100% - 20px);
    box-shadow: 0 -3px 5px #eee;
    text-align: center;
    background: #fff;
    left: 50%;
    transform: translateX(-50%);
  }
</style>
